<template>
  <view class="code-flex-col mt-17">
    <view class="code-flex-row code-items-center code-self-stretch">
      <view class="code-flex-col code-justify-start code-items-center code-relative group_10">
        <image
          class="image_8"
          src="https://ide.code.fun/api/image?token=658a8497bddbb70011853f9f&name=5411be279216b8bc8e16925f959b2f5d.png"
        />
        <image
          class="image_7 pos_2"
          src="https://ide.code.fun/api/image?token=658a8497bddbb70011853f9f&name=2f06c91518e497da628e450b29838508.png"
        />
      </view>
      <view class="code-flex-col ml-9">
        <text class="code-self-start font_7">麦咖啡拿铁</text>
        <view class="code-flex-row code-items-center code-self-stretch mt-9">
          <text class="font_4 text_12">极好</text>
          <image
            class="code-shrink-0 image_9 ml-5"
            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/65727dc75a7e3f0310be272c/6572b290fcfbac001137bd7e/2dccf9d092c9426958496b9ef05bb873.png"
          />
        </view>
      </view>
    </view>
    <view class="code-flex-col code-self-end group_11">
      <text class="code-self-stretch font_3">阿信唱歌非常卖力，即使状态不好，我那场也</text>
      <text class="code-self-stretch font_3 mt-3">完全没有躲高音，高音尾音都在很尽力的表演</text>
      <text class="code-self-stretch font_3 mt-3">后劲很大，大家看了后面那几周北京的榜单，</text>
      <text class="code-self-stretch font_3 mt-3">
        都在戒断反应中，我回去也是一个歌单一直听，
        <br />
      </text>
      <text class="code-self-start font_3 mt-3">还感觉自己在现场，还有那种感动。</text>
    </view>
    <view class="code-flex-row equal-division">
      <image
        class="image_10 equal-division-item"
        src="https://ide.code.fun/api/image?token=658a8497bddbb70011853f9f&name=25cde4785e5ed0740bf1c913dd708d36.png"
      />
      <image
        class="code-ml-8 image_10 equal-division-item"
        src="https://ide.code.fun/api/image?token=658a8497bddbb70011853f9f&name=25cde4785e5ed0740bf1c913dd708d36.png"
      />
      <image
        class="code-ml-8 image_10 equal-division-item"
        src="https://ide.code.fun/api/image?token=658a8497bddbb70011853f9f&name=25cde4785e5ed0740bf1c913dd708d36.png"
      />
    </view>
    <view class="code-flex-row code-justify-between code-items-center code-self-stretch group_12">
      <view class="code-flex-row code-items-baseline">
        <text class="font_8">2023.02.03</text>
        <text class="code-ml-4 font_8">19:00</text>
        <text class="code-ml-4 font_8">杭州站</text>
      </view>
      <view class="code-flex-row">
        <image
          class="code-shrink-0 image_12"
          src="https://ide.code.fun/api/image?token=658a8497bddbb70011853f9f&name=a2bec5e96f95b36d5d2f8209fa229e21.png"
        />
        <text class="font_8 text_13">80</text>
        <image
          class="code-shrink-0 image_11"
          src="https://ide.code.fun/api/image?token=658a8497bddbb70011853f9f&name=88e28698db3719954bd163f770ad2267.png"
        />
        <text class="font_8 text_14">120</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
.mt-17 {
  margin-top: 34rpx;
}

.mt-9 {
  margin-top: 18rpx;
}

.ml-5 {
  margin-left: 10rpx;
}

.mt-3 {
  margin-top: 6rpx;
}

.ml-9 {
  margin-left: 18rpx;
}

.group_10 {
  padding-top: 6rpx;
  width: 82rpx;

  .image_8 {
    border-radius: 50%;
    width: 80rpx;
    height: 80rpx;
  }

  .image_7 {
    width: 28rpx;
    height: 28rpx;
  }

  .pos_2 {
    position: absolute;
    right: 0;
    top: 0;
  }
}

.font_7 {
  font-size: 32rpx;
  font-family: PingFang;
  line-height: 30.18rpx;
  font-weight: 800;
  color: #171726;
}

.font_4 {
  font-size: 24rpx;
  font-family: PingFang;
  line-height: 23.74rpx;
  font-weight: 300;
  color: #696975;
}

.text_12 {
  color: #ff9c4b;
  font-weight: 800;
  line-height: 22.1rpx;
}

.image_9 {
  width: 116rpx;
  height: 18rpx;
}

.group_11 {
  margin-top: 24rpx;
  width: 582.66rpx;

  .font_3 {
    font-size: 28rpx;
    font-family: PingFang;
    line-height: 34rpx;
    font-weight: 800;
    color: #171726;
  }
}

.equal-division {
  align-self: flex-end;
  margin-top: 28rpx;
  width: 86%;

  .image_10 {
    flex: 1 1 180rpx;
  }

  .equal-division-item {
    border-radius: 8rpx;
    height: 180rpx;
  }
}

.group_12 {
  margin-top: 26rpx;
  padding-left: 100rpx;
  padding-right: 12rpx;

  .font_8 {
    font-size: 20rpx;
    font-family: PingFang;
    line-height: 14.6rpx;
    font-weight: 800;
    color: #696975;
  }

  .image_12 {
    width: 20rpx;
    height: 16rpx;
  }

  .text_13 {
    margin-left: 4rpx;
  }

  .image_11 {
    margin-left: 20rpx;
    width: 18rpx;
    height: 18rpx;
  }

  .text_14 {
    margin-left: 4rpx;
  }
}
</style>
